<template>
	<view class="choosAddress">
		<dwu-navbar-bg image="/static/choosAddress/top_bg.png" title="城市选择"></dwu-navbar-bg>
		<view class="address-box">
			<view class="search">
				<image src="@/static/choosAddress/search_icon.png" mode=""></image>
				<input type="text" v-model="searchText" placeholder="请输入城市搜索" @input="search" />
			</view>
			<block v-if="searchList.length > 0">
				<view class="box-title">
					<view class="left">城市搜索</view>
					<view class="right"></view>
				</view>
				<view class="search-list">
					<view class="search-item" v-for="(item,index) in searchList" :key="index"  @click="chooseCity(item)">
						{{item.city}}
					</view>
				</view>
			</block>
			
			<view class="box-title">
				<view class="left">当前城市</view>
				<view class="right" @click="resetLocation">
					<image src="@/static/choosAddress/reset_icon.png" mode=""></image>
					<text>重新定位</text>
				</view>
			</view>
			<view class="now-address" @click="city!='未开通位置权限'&& chooseCity({city:city})">
				<image v-if="city!='未开通位置权限'" src="@/static/index/location_icon1.png" mode=""></image>
				<image v-else src="@/static/choosAddress/location_icon.png" mode=""></image>
				<text>{{city}}</text>
			</view>
			<view class="box-title">
				<view class="left">已开通城市</view>
				<view class="right"></view>
			</view>
			<view class="address-list">
				<u-index-list :index-list="indexList" activeColor="#B0DD67">
					<template v-for="(item, index) in itemArr">
						<u-index-item>
							<u-index-anchor :text="indexList[index]"></u-index-anchor>
							<view class="list-cell" v-for="(cell, indexs) in item" :key="indexs" @click="chooseCity(cell)">
								{{cell.city}}
							</view>
						</u-index-item>
					</template>
				</u-index-list>
				<!-- <view class="address-item" v-for="(item,index) in cityList" :key="index" @click="chooseCity(item)">
					{{item.city}}
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityList: {},
				city: '',
				dwuLocationNow: {},
				indexList: [],
				itemArr: [],
				searchText: '',
				searchList: []
			};
		},
		onLoad() {
			let dwuLocationNow = uni.getStorageSync('dwu-location-now')
			this.dwuLocationNow = dwuLocationNow
			this.getCityList()
			this.cityIfOn()
		},
		methods: {
			search() {
				let cityList = this.cityList
				this.searchList = []
				if (!this.searchText) return
				for (let key in cityList) {
					let cityListS = cityList[key]
					for (var i = 0; i < cityListS.length; i++) {
						if (cityListS[i].city.indexOf(this.searchText) !== -1) {
							this.searchList.push(cityListS[i])
						}
					}
				}
				console.log(this.searchList);
			},
			resetLocation() {
				uni.getLocation({
					success: (res) => {
						this.longitude = res.longitude
						this.latitude = res.latitude
						this.amap.getAddressByLatLng(res.latitude, res.longitude).then(ress => {
							let addressComponent = ress.addressComponent
							let aois = ress.aois
							this.city = addressComponent.city
							this.address = ress.formatted_address
							this.area = aois[0].name
							let dwuLocationNow = {
								longitude: res.longitude,
								latitude: res.latitude,
								province: addressComponent.province,
								city: addressComponent.city,
								district: addressComponent.district,
								township: addressComponent.township,
								address: ress.formatted_address
							}
							this.dwuLocationNow = dwuLocationNow
							uni.setStorageSync('dwu-location-now', dwuLocationNow)
							this.cityIfOn()
						})
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			getCityList() {
				this.request.http('/index/chengshiindex', 'post').then(res => {
					let data = res.data
					if (data.code == 1) {
						let cityList = data.data
						this.cityList = cityList
						for (let key in cityList) {
							this.indexList.push(key)
							this.itemArr.push(cityList[key])
						}
					}
				})
			},
			cityIfOn() {
				this.request.http('/index/cityIfOn', 'post', {
					name: this.dwuLocationNow.city
				}).then(res => {
					let data = res.data
					if (data.code == 1) {
						this.city = this.dwuLocationNow.city
					}
				}).catch(err => {
					this.city = '未开通位置权限'
				})
			},
			chooseCity(item) {
				console.log(item,'chooseCity');
				this.amap.getAddressByAddress(item.city, item.city).then(res => {
					let data = res[0]
					let location = data.location
					let dwuLocationNow = {
						longitude: location.split(',')[0],
						latitude: location.split(',')[1],
						province: data.province,
						city: data.city,
						district: data.district,
						township: data.township,
						address: data.formatted_address
					}
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					prevPage.$vm.city = data.city
					prevPage.$vm.address = data.formatted_address
					prevPage.$vm.area = data.city
					uni.setStorageSync('dwu-location-now', dwuLocationNow)
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style lang="less">
	.choosAddress {
		.address-box {
			padding: 26rpx 32rpx;

			.search {
				width: 677rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 38rpx;
				border: 4rpx solid #5B5B5B;
				display: flex;
				align-items: center;
				padding: 0 34rpx;

				image {
					width: 38rpx;
					height: 38rpx;
					margin-right: 28rpx;
				}

				input {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 27rpx;
					color: #929292;
				}
			}
			
			.search-list {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.search-item {
					padding: 0 30rpx;
				margin-right: 26rpx;
				margin-bottom: 20rpx;
					// width: 113rpx;
					height: 67rpx;
					border-radius: 21rpx;
					border: 2rpx solid #DDDDDD;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 27rpx;
					color: #666666;
					line-height: 67rpx;
				}
			}
 

			.box-title {
				margin-top: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 31rpx;
					color: #474747;
				}

				.right {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #B0DD67;
					display: flex;
					align-items: center;

					image {
						width: 27rpx;
						height: 27rpx;
						margin-right: 14rpx;
					}
				}
			}

			.now-address {
				margin-top: 21rpx;
				margin-bottom: 50rpx;
				display: flex;
				align-items: center;

				image {
					width: 38rpx;
					height: 46rpx;
					margin-right: 14rpx;
				}

				text {
					display: block;
					display: flex;
					align-items: center;
					// width: 113rpx;
					padding: 0 16rpx;
					height: 47rpx;
					border-radius: 15rpx;
					border: 2rpx solid #DDDDDD;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 27rpx;
					color: #717171;
				}
			}

			.address-list {
				margin-top: 30rpx;

				.address-item {
					margin: 10rpx 0;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 27rpx;
					color: #666666;
					line-height: 38rpx;
				}
				
				.u-index-anchor {
					background-color: transparent!important;
					padding-left: 0;
					font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					font-size: 31rpx;
					color: #474747;
					border-bottom: 1rpx solid #E5E5E5;
					margin-bottom: 6rpx;
				}
				.list-cell {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 27rpx;
					color: #666666;
					line-height: 38rpx;
				}
				.u-index-list__letter__item__index {
					font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					font-size: 23rpx;
					// color: #999999!important;
					line-height: 31rpx;
				}
			}

		}
	}
	
</style>